<template>
  <!-- 财务报表报送首页 -->
  <div style="width: 100%;">
    <div class="typesOfFinancialStatementsToBeSubmitted">
      <!-- 财务报表报送种类 -->
      <div class="title1">财务报表报送种类</div>
      <hr style="border: 1px solid #e9e9e9;border-radius: 1px;margin: 18px 0 18px 0; ">

      <div class="formBox">
        <!-- 报送期间 -->
        <div>
          <div class="title2">
            报送期间
          </div>
          <el-radio-group v-model="reportRadio" @change="selectReportRadio">
            <el-radio :value="item.value" v-for="(item, index) in reportRadioOptions" :key="item.id">
              {{ item.label }}</el-radio>
          </el-radio-group>
        </div>
        <!-- 报送所属期间 -->
        <div>
          <div class="title2">
            报送所属期间
          </div>
          <div>
            <!-- 按年选择 -->
            <div v-show="reportRadio == 3">
              <el-date-picker @change="changeSelectedYear" v-model="selectedYear" type="year" placeholder="请选择年份" />
              {{ theDateRangeOfTheSubmissionPeriod.startDate }} 至 {{ theDateRangeOfTheSubmissionPeriod.endDate }}
            </div>
            <!-- 按月选择，当然也可以选择年份 -->
            <div v-show="reportRadio == 1">
              <el-date-picker @change="changeselectedMonth" v-model="selectedMonth" type="month" placeholder="请选择月份" />
              {{ theDateRangeOfTheSubmissionPeriod.startDate }} 至 {{ theDateRangeOfTheSubmissionPeriod.endDate }}
            </div>

            <!-- 季度选择器 -->
            <div style="display: flex;" v-show="reportRadio == 2">
              <QuarterSelector v-model="selectedQuarter" @change="handleQuarterChange" />
            </div>
          </div>
        </div>
        <!-- 报送小类 -->
        <div>
          <div class="title2">
            报送小类
          </div>

          <div class="  greyBack">
            {{ '财务报表报送与信息采集(小企业会计准则)' }}
          </div>
        </div>
      </div>

      <!-- 报送模式选择 -->
      <div class="title1">报送模式选择</div>
      <hr style="border: 1px solid #e9e9e9;border-radius: 1px;margin: 18px 0 18px 0; ">

      <!-- 报送模式选择3个模块 -->
      <div class="grid3xn">
        <!-- 每一个模块 -->
        <!-- 1px solid transparent是透明防抖占位边框 -->
        <div class="item" v-for="(item, index) in modulesList" :key="item.id"
          :style="{ border: item.selected ? '1px solid #0099ff' : '1px solid transparent', }"
          @click="clickModule(item.id)">
          <div style="float: right;transform: translate(6px, -10px);color:#0099ff;font-size: 18px; font-weight: 800;"
            v-show="item.selected">
            ✔
          </div>
          <div class="title">
            {{ item.title }}
          </div>
          <div class="content">
            {{ item.content }}
          </div>
        </div>
      </div>

      <!-- 下一步按钮 -->
      <div style="display: flex;justify-content: center;margin-top: 2%;margin-bottom: 10%; ">
        <el-button type="primary" @click="nextStep()">
          下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import QuarterSelector from '@/components/QuarterSelector/QuarterSelector.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { globalStore } from '@/stores/global.js'
import { storeToRefs } from 'pinia'
const { dataList, dateRange, theDateRangeOfTheSubmissionPeriod, selectedQuarter, reportRadio,
  selectedModule, modulesList,
} = storeToRefs(globalStore())
console.log('dataList.value:', dataList.value);
console.log('dateRange.value:', dateRange.value);

const router = useRouter()

// 选中的年份
const selectedYear = ref(theDateRangeOfTheSubmissionPeriod.value.startDate)
// 年份改变事件
const changeSelectedYear = (val) => {
  console.log('changeSelectedYear val:', val);//Mon Jan 01 2029 00:00:00 GMT+0800 (China Standard Time)
  console.log('selectedYear.value:', selectedYear.value);//Mon Jan 01 2029 00:00:00 GMT+0800 (China Standard Time)
  let year = val.getFullYear()
  console.log('选中的年份year:', year);//2024
  theDateRangeOfTheSubmissionPeriod.value.startDate = year + '-01-01'
  theDateRangeOfTheSubmissionPeriod.value.endDate = year + '-12-31'
}

// 选中的月份
const selectedMonth = ref(theDateRangeOfTheSubmissionPeriod.value.startDate)
// 月份改变事件
const changeselectedMonth = (val) => {
  console.log('changeselectedMonth val:', val);//Mon Jan 01 2029 00:00:00 GMT+0800 (China Standard Time)
  console.log('selectedMonth.value:', selectedMonth.value);//Mon Jan 01 2029 00:00:00 GMT+0800 (China Standard Time)
  let month = val.getMonth() + 1
  console.log('选中的月份month:', month);// 6
  let year = val.getFullYear()
  console.log('选中的年份year:', year);//2024
  theDateRangeOfTheSubmissionPeriod.value.startDate = year + '-' + month.toString().padStart(2, '0') + '-01'
  theDateRangeOfTheSubmissionPeriod.value.endDate = year + '-' + month.toString().padStart(2, '0') + + '-31'
  console.log('theDateRangeOfTheSubmissionPeriod.value:', theDateRangeOfTheSubmissionPeriod.value);
}

//季度改变事件
const handleQuarterChange = (val) => {
  console.log('季度改变事件val:', val);
  if (reportRadio.value == 2) {
    theDateRangeOfTheSubmissionPeriod.value.startDate = val.dateRange.split(' 至 ')[0]
    theDateRangeOfTheSubmissionPeriod.value.endDate = val.dateRange.split(' 至 ')[1]
    console.log('季度改变事件selectedQuarter.value:', selectedQuarter.value);
  }
}


const reportRadioOptions = ref([{ label: '月报', value: 1, id: 1 }, { label: '季报', value: 2, id: 2 }, { label: '年报', value: 3, id: 3 }])
// 报送期间单选按钮组选择事件
const selectReportRadio = (val) => {
  console.log('报送期间单选按钮组选择事件val:', val);
  console.log('报送期间单选按钮组选择事件reportRadio:', reportRadio.value);

}

// 模块点击事件
const clickModule = (id) => {
  console.log('财务报表模块点击事件id:', id);
  selectedModule.value = id
  modulesList.value.forEach((item, index) => {
    if (item.id === id) {
      //选中的模块打对勾
      item.selected = true
    } else {
      //取消其他模块的对勾
      item.selected = false
    }
  })
  console.log('财务报表模块点击事件modulesList:', modulesList.value);

}


//下一步按钮点击事件
const nextStep = () => {
  switch (reportRadio.value) {
    case 1:
      // 月度
      console.log('selectedMonth.value:', selectedMonth.value);//selectedMonth.value: 2025-01-01
      const month = new Date(selectedMonth.value).getMonth() + 1//数字1-12
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      dateRange.value = {
        title: monthNames[month - 1],
        startDate: theDateRangeOfTheSubmissionPeriod.value.startDate,
        endDate: theDateRangeOfTheSubmissionPeriod.value.endDate
      }
      break;
    case 2:
      // 季度
      const [year, quarter] = selectedQuarter.value.split('-Q')
      const q = Number(quarter)
      const quarterNames = ['第一季度', '第二季度', '第三季度', '第四季度']
      dateRange.value = {
        title: quarterNames[q - 1],
        startDate: theDateRangeOfTheSubmissionPeriod.value.startDate,
        endDate: theDateRangeOfTheSubmissionPeriod.value.endDate
      }
      break;
    case 3:
      //年度
      dateRange.value = {
        title: new Date(selectedYear.value).getFullYear() + '年度',
        startDate: theDateRangeOfTheSubmissionPeriod.value.startDate,
        endDate: theDateRangeOfTheSubmissionPeriod.value.endDate
      }
      break;
    default:
      break;
  }
  console.log('选中的模块', selectedModule.value);
  if (selectedModule.value === 1) {
    router.push('/submissionAndCorrectionOfFinancialStatements')
  } else if (selectedModule.value === 2) {
    router.push('/earningsConversion')
  }
  else {
    router.push('/cashFlowStatement')
  }


}
onMounted(() => {

})

</script>

<style scoped lang="scss">
.typesOfFinancialStatementsToBeSubmitted {
  width: 90%;
  margin: auto;
  padding: 2%;
  border-radius: 5px;
  background-color: #fff;

  .title1 {
    font-size: x-large;
    font-weight: 500;
  }

  .formBox {
    width: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr;

    &>div {
      margin-bottom: 4%;
    }

    .title2 {
      color: #857a73;
      margin-bottom: 2%;
    }

    .greyBack {
      color: #3f3f3f;
      background-color: #fafafa;
      border: 1px solid #e9e9e9;
      border-radius: 5px;
      padding: 1%;
    }
  }

  .grid3xn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
    //10px会自动加大div的高度，不要用%，会使得内容物超出div
    row-gap: 10px;

    .item {
      background-color: #f9fafd;
      padding: 4%;
      border-radius: 5px;
      cursor: pointer;

      .title {
        font-weight: 500;
        margin-bottom: 1%;
      }

      .content {
        color: #857a73;
      }
    }
  }
}

//日期选择器宽度
:deep(.el-date-editor) {
  width: 44%;
}
</style>